<template>
  <el-row>
    <el-col :span="8">
      <div class="grid-content bg-purple">&nbsp;</div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content bg-purple-light">
        <div style="margin-top:50px"></div>
        <el-form label-position="left" label-width="80px" :model="user" :rules="rules" ref="user"
        >
          <el-form-item label="账号" prop="number">
            <el-input v-model="user.number"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passwd">
            <el-input v-model="user.passwd"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-top: 10px" type="primary" @click="register">注册</el-button>
            <el-button @click="resetForm('user')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
</template>

<script>
import axios from "axios";
import {mapActions, mapState} from 'vuex'

export default {
  name: "register",
  data() {
    return {
      user: {
        number: '',
        name: '',
        passwd: '',
      },
      rules: {
        number: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 10, max: 10, message: '请输入10位帐号', trigger: 'blur'}
        ],
        passwd: [
          {required: true, message: '请输入密码号', trigger: 'blur'},
          {min: 6, max: 11, message: '长度应为6到11位', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
      },
    }
  },

  computed: {
    ...mapState('userOptions', ['dept'])
  },

  methods: {
    ...mapActions('userOptions', {getDept: 'findDepts'}),
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    register() {
      var that = this;
      let data = this.user
      that.$refs['user'].validate((valid) => {  //开启校验
        if (valid) {
          axios.post("/api/admin/admin/"+JSON.stringify(data))
              .then(
              response => {
                if (response.data.code == 200) {
                  console.log('注册成功')
                  alert(response.data.message)
                  this.$router.push("/login")
                }else {
                  alert(response.data.message)
                }
              },
              error => {
                //请求失败
                alert('已注册，请勿重复注册')
              }
          )
        } else {   //校验不通过
          alert('请检查输入格式')
          return false;
        }
      });
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
</style>
